import './index.css';
import React, { useState } from 'react';
import { Table, Form, Input, Select, Button, Modal } from 'antd';

console.log(Modal);

const Coupon = () => {
  const [ showModal, setShowModal ] = useState(false);

  const createCouponTemplate = () => {
    setShowModal(true);
  }

  return (
    <div>
      <Modal title="Basic Modal" visible={showModal}>
        <Form>
          <Form.Item name="amount" label="金额">
            <Input placeholder="amount"></Input>
          </Form.Item>
          <Form.Item name="rich" label="满多少元可用">
            <Input placeholder="rich"></Input>
          </Form.Item>
          <Form.Item name="endkind" label="时间类型">
            <Select placeholder="endkind">
              <Select.Option value={1}>相对时间</Select.Option>
              <Select.Option value={2}>绝对时间</Select.Option>
            </Select>
          </Form.Item>
        </Form>
      </Modal>

      <div className="coupon-filter">
        <Form layout="inline">
          <Form.Item name="amount" label="金额大于">
            <Input placeholder="amount" />
          </Form.Item>
          <Form.Item name="endkind" label="时间类型">
            <Select placeholder="endkind">
              <Select.Option value={1}>相对时间</Select.Option>
              <Select.Option value={2}>绝对时间</Select.Option>
            </Select>
          </Form.Item>
          <Button type={'primary'}>筛选</Button>
        </Form>

        <Button type={'primary'} onClick={createCouponTemplate}>新增</Button>
      </div>

      <Table dataSource={dataSource} columns={columns} />;
    </div>
  )
}

export default Coupon;

var dataSource = [
];

var columns = [
  {
    title: 'id',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '金额',
    dataIndex: 'amount',
    key: 'amount',
  },
  {
    title: '满N元可用',
    dataIndex: 'rich',
    key: 'rich',
  },
];
